<template>
    <div class="card-border flex-direction-column event-msg-card">
        <div class="search-table-tool">
            <div class="input-wrap">
                <svg-icon icon-class="search_icon" />
                <ElInput v-model="searchForm.event_name" :placeholder="$t('搜索文件名')"></ElInput>
            </div>
            <el-config-provider :locale="i18n_local">
                <el-date-picker v-model="pickerDate" class="data-gather-picker-date" type="datetimerange"
                    :start-placeholder="$t('Start Date')" :end-placeholder="$t('End Date')" :default-time="defaultTime1"
                    @change="handleChangeTime" />
            </el-config-provider>
        </div>
        <ul class="warn-msg-wrap">
            <li class="item" v-for="(warn, i) in eventsList" :key="i">
                <span>
                    {{ warn.ui_event_time }}
                </span>
                <span>
                    {{ warn.event_name }}
                </span>
            </li>
        </ul>
        <div class="page-config-btn-wrap" v-if="eventsList && eventsList.length">
            <div class="button-prev">
                <svg-icon icon-class="left_arrow" />
            </div>
            <div class="button-next">
                <svg-icon icon-class="right_arrow" />
            </div>
        </div>
    </div>

</template>
<script lang="ts" setup>

import { zhCn, en } from 'element-plus/es/locale/index.mjs'
import { i18n } from '@/vue-i18n'

import {
    T_Data_Event_Row,
} from './types.ts'

import type {
    T_DeviceVideoSearch,
} from '@/data-services/api/types'

import {
    GetEvents_CameraList,
} from '@/data-services/api'

import {
    getTimeComponentStrings,
} from '@/utils'


const eventsList = ref<T_Data_Event_Row[]>()
const pickerDate = ref('')
const defaultTime1 = new Date()
const searchForm = reactive<T_DeviceVideoSearch>({
    camera_id: '',
    sort: {
        // video_start: 'ascending',
        video_start: 'descending',
    },
})

const pageConfig = reactive({
    pageSize: 10,
    pageNumber: 0,
    eventTotal: 0,
})

const handleChangeTime = () => {
    if (!pickerDate.value || !pickerDate.value.length) {
        searchForm.dateRange && (searchForm.dateRange.start = 0)
        searchForm.dateRange && (searchForm.dateRange.end = 0)
        return
    }
    const startTime = new Date(pickerDate.value[0])
    const endTime = new Date(pickerDate.value[1])

    searchForm.dateRange && (searchForm.dateRange.start = startTime.getTime())
    searchForm.dateRange && (searchForm.dateRange.end = endTime.getTime())
}

function formatEventRow(row: T_Data_Event_Row) {
    const item = row
    let time: T_TimeStrings | null = null
    if (typeof item.event_time === 'number') {

        time = getTimeComponentStrings(item.event_time)
        item.ui_event_time = `${time.year}/${time.month}/${time.day} ${time.hour}:${time.minute}`
    }
    item.event_name = item.event_name || '--'
    return item
}

const getEventList = async (paginationPageIndex?: number, seachData?: any) => {
    let res
    const params = {
        entriesPerPage: pageConfig.pageSize,
        pageNumber: paginationPageIndex === undefined ? pageConfig.pageNumber : paginationPageIndex,
        condition: { ...seachData },
    }
    try {
        res = await GetEvents_CameraList(params)
        const { eventList, totalEvents } = res.data
        if (res.data && eventList) {
            eventsList.value = eventList
            pageConfig.eventTotal = totalEvents

            eventsList?.value?.map(item => {
                return formatEventRow(item)
            })
        }
    } catch (error) {
        console.log(error)
    }
}

getEventList()

let i18n_local = zhCn
watch(() => i18n.global.locale, (local: any) => {
    if (local.value === 'zh-Hans') {
        i18n_local = zhCn
    }
    if (local.value === 'en') {
        i18n_local = en
    }
},
    { immediate: true, deep: true }
)
</script>
<style lang="scss">
.event-msg-card {
    flex: 1;

    .warn-msg-wrap {
        margin-top: 9px;

        .item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 13px;
            color: #CADCFF;
            font-size: 20px;
            font-style: normal;
            font-weight: 600;
            line-height: 24.696px;
            /* 123.48% */
            border: 2px solid transparent;
            border-image: linear-gradient(90deg, hsla(234, 98%, 23%, 2), transparent);
            border-image-slice: 2;

            .msg {
                display: flex;
                align-items: center;
                gap: 6px;

                .svg-icon {
                    width: 1.1rem;
                    height: 1.1rem;
                }
            }
        }
    }
}

.page-config-btn-wrap {
    position: relative;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    width: 100%;
    margin-top: 13px;

    .button-next,
    .button-prev {
        width: 40px;
        height: 30px;
        cursor: pointer;

        &:hover {
            opacity: 0.8;
        }
    }

    .svg-icon {
        font-size: 24px;
    }
}
</style>